{% extends 'generic.html' %}
{% load i18n %} {# Translating code #}

{% block cssBlock %}
	<link href="/media/css/{{request.session.theme}}/pageProfile/style.css" type="text/css" rel="stylesheet"/>
	<link href="/media/css/{{request.session.theme}}/pageForm/style.css" type="text/css" rel="stylesheet"/>
	<link href="/media/css/{{request.session.theme}}/pageContact/style.css" type="text/css" rel="stylesheet"/>
{% endblock %}

{% block jsBlock %}
	<script type="text/javascript">
		$(document).ready(function() {
			var titleText = ["{% blocktrans %}Explain the main reason of needed support.{% endblocktrans %}",
			"{% blocktrans %}Describe the error in one line.{% endblocktrans %}",
			 "{% blocktrans %}Write the title of the course that you want to create.{% endblocktrans %}",
			  "{% blocktrans %}Write the title of the course that you want to join.{% endblocktrans %}"]
			var descText = ["{% blocktrans %}Explain as detailed as possible the help you need.{% endblocktrans %}",
			"{% blocktrans %}Copy and paste the link of the page where you got the error. Explain step by step how did you find it, if possible.{% endblocktrans %}",
			 "{% blocktrans %}Explain as much as possible about the course so that the admins can determine wether to approve it or not. The more concise the better!{% endblocktrans %}",
			  "{% blocktrans %}Please explain the reasons why to join and please copy and paste here the link of the course you want to join so we make no mistake. Keep in mind we will contact the current owners of the course so they have the last word!{% endblocktrans %}"]
			switch($("#id_contacttype").val()){
				case 'supp':
					$("#contacttitle").html(titleText[0]);
					$("#contactdesc").html(descText[0]);
					break;
				case 'repo':
					$("#contacttitle").html(titleText[1]);
					$("#contactdesc").html(descText[1]);
					break;
				case 'crea':
					$("#contacttitle").html(titleText[2]);
					$("#contactdesc").html(descText[2]);
					break;
				case 'join':
					$("#contacttitle").html(titleText[3]);
					$("#contactdesc").html(descText[3]);
					break;
			}
			$("#id_contacttype").change(function(){
				switch($(this).val()){
					case 'supp':
						$("#contacttitle").html(titleText[0]);
						$("#contactdesc").html(descText[0]);
						break;
					case 'repo':
						$("#contacttitle").html(titleText[1]);
						$("#contactdesc").html(descText[1]);
						break;
					case 'crea':
						$("#contacttitle").html(titleText[2]);
						$("#contactdesc").html(descText[2]);
						break;
					case 'join':
						$("#contacttitle").html(titleText[3]);
						$("#contactdesc").html(descText[3]);
						break;
				}
			});
		});
	</script>
{% endblock %}

{% block article %}
<header>{% blocktrans %}Contact us{% endblocktrans %}</header>
<p class="explanation">{% blocktrans %}Didn't you find the answers to your questions in our help section? Do you want to create a course, or become a member of one? Use this contact form to resolve these questions with our administrators.{% endblocktrans %}</p>
<form action="." method="POST">
	{% csrf_token %}
 	<p>{{form.non_field_errors}}</p>
 	<h2>{{form.contacttype.label_tag}}</h2>
 	<span class="explanation">{% blocktrans %}If you are not sure, leave 'Support', if other is selected and not correctly selected, it will be discarded by our administrators.{% endblocktrans %}</span>
 	<p>{{form.contacttype}}</p>
 	<p>{{form.contacttype.errors}}</p>
 	<h2>{{form.title.label_tag}}</h2>
 	<span id="contacttitle" class="explanation"></span>
 	<p>{{form.title}}</p>
 	<p>{{form.title.errors}}</p>
 	<h2>{{form.description.label_tag}}</h2>
 	<span id="contactdesc" class="explanation"></span>
 	<p>{{form.description}}</p>
 	<p>{{form.description.errors}}</p>

 	<span class="center"><input type="submit" value="{% blocktrans %}Send{% endblocktrans %}" /></span>
 </form>

{% endblock %}
